<template>
  <div><br>
   <el-form >
    <el-form-item label="病人名字" label-width="80px">
        <el-input :value="patient.name"></el-input>
    </el-form-item>
    <el-form-item label="主治医生" label-width="80px">
        <el-input :value="doctor.docName"></el-input>
    </el-form-item>
    <el-form-item label="请选择退药的药品以及数量" label-width="30%">
        <el-cascader
            v-model="selectedDrug"
            :options="newDataArray"
            clearable
            :check-strictly="true"
            @change="handleCascaderChange"
            placeholder="请选择药品及数量">
        </el-cascader>
    </el-form-item>
    <el-form-item label="退药理由" label-width="80px">
        <el-input type="textarea" v-model="content"></el-input>
    </el-form-item>
    <el-form-item>
            <!-- 退药明细的表格数据 -->
            <el-table
            :data="drugDetails"
            style="width: 100%">
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="mdName" label="药名" width="180"></el-table-column>
            <el-table-column prop="mdNum" label="退药数量"></el-table-column>
            <el-table-column prop="mdBuyPrice" label="药品单价"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRow(scope.$index)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        </el-form-item>
    <el-form-item>
        <el-button type="warning" size="mini" @click="dialogVisible=false">重置</el-button>
        <el-button type="primary" size="mini" @click="AddWithdrawal">确定</el-button>
    </el-form-item>
    </el-form>
    <span style="color: red;">{{ msg }}</span>
  </div>
</template>

<script>
export default {
    props: {
         caseId:{
             type: Number,
             required: true
         }
     },
    data(){
        return{
            patient:{},
            doctor:{},
            value:'',
            msg:'',
            options:[],
            drugReturnDetail:{},
            drugDetails:[],
            selectedDrug: [], // 选择的药品
            newDataArray:[],
            content:''//退药理由
        }
    },
    methods:{
        //查找医生信息
        queryDoctor(){
         this.$axios.get("api/doctor/queryDoctor")
         .then(res=>{
             if(res.data.code==200){
                 this.doctor=res.data.data;

             }
         })
         },
         //查找病人信息
         queryPatient(){
             this.$axios.get("api/doctor/queryPatient/"+this.caseId)
             .then(res=>{
             if(res.data.code==200){
                 this.patient=res.data.data;
                 this.queryDrugDetail()
             }
         }) 
         },
         
         closeDialogWithData() {
             // 触发事件并传递数据给父组件
             this.$emit('closeDialog', this.patient.id); // 替换 dataToPass 为你想要传递的数据
         },
         
         handleChange(value) {
            console.log("value" + value);
         },
         // 处理选项变化事件
        handleSelectionChange(value) {
            // 在这里可以根据选中的药品值执行相应的操作
            this.drugDetail=value;
            this.options=[]
        },
        deleteRow(index) {
            // 从 drugDetails 数组中移除指定索引的行数据
            this.drugDetails.splice(index, 1);
            console.log(this.drugDetails)
        },
        //查找用药明细表的数据 赋给options
        queryDrugDetail(){
            this.$axios.get('api/drugDistribution/queryMDSByPpNo/'+this.patient.id)
            .then(res=>{
                if(res.data.code==200){
                    this.options=res.data.data
                    this.selectedDrug=res.data.data
                    this.newDataArray = this.options.map(item => ({
                        label: item.mdName,  // 假设原始数据中有 mdName 属性
                        value: item,    // 假设药品id 属性
                        mdNum: item.mdNum,
                        children:  Array.from({ length: item.mdNum }, (_, index) => ({
                            value: index + 1,
                            label: String(index + 1)
                        })).reverse()
                    }));
                }
            })
        },
        handleCascaderChange(value) {
            // 根据选择的药品更新级联选择器的选项
            // 这里可以根据实际需求从后端获取数据或者从本地数据中筛选
            // 示例中直接将数量作为级联的子选项
            let drugReturnDetail={}
            let valueOb = JSON.parse(JSON.stringify(value))
            drugReturnDetail=valueOb[0]
            drugReturnDetail.mdNum=valueOb[1]//退药数量
            // 检查是否存在相同 ID 的 drugReturnDetail
            const exists = this.drugDetails.some(item => item.id === drugReturnDetail.id);
            // 如果不存在相同 ID 的 drugReturnDetail，则将其添加到数组中
            if (!exists) {
            this.drugDetails.push(drugReturnDetail);
            }else{
                this.$message({
                    showClose: false,
                    message:"不能重复添加同一种药品，如需修改，请删除该条数据重新添加",
                    type:'warning'
                });
            }
            console.log(valueOb)
        },
        //添加退药申请以及退药明细
        AddWithdrawal(){
            if(this.content==null || this.content==''){
                this.msg='请填写退药理由'
                return
            }
            let withdrawalDTO={}
            withdrawalDTO.caseId=this.patient.id;
            withdrawalDTO.docId=this.doctor.id;
            withdrawalDTO.content=this.content;
            withdrawalDTO.drugDetails = this.drugDetails
            this.$axios.post('api/withdrawal/addWithdrawal',withdrawalDTO)
            .then(res=>{
                if(res.data.code==200){
                    console.log(res.data.data)
                    this.$message.success("退药申请已发出，请等待药房审批")
                    this.closeDialogWithData()
                }
            })
            
        }
    },
    created(){},
    mounted(){
        this.queryDoctor()
        this.queryPatient()
    }
}
</script>

<style>

</style>